import React, { Component } from 'react'
import {connect} from "react-redux"
import Dirlog from "../components/dirlog"
import { Table, Tag, Space} from 'antd';
import * as action from "../action/index.js"
import {bindActionCreators} from "redux"
import { Modal} from 'antd';
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
const { Search } = Input;
 class Dh1 extends Component {
   state = {
    isshow:false,
    searchVal:"",
    editIndex:0,
    bianji:"新增",
    visible: false,//抽屉得开关
    isModalVisible:false, // 用于控制删除弹窗得显示与隐藏
    delIndex:0,// 记录要删除哪一条得下标
    columns:[
        {
          title: '姓名',
          dataIndex: 'name1',
          key: 'name1',
          render: text => <a>{text}</a>,
        },
        {
          title: '日期',
          dataIndex: 'date',
          key: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '修改或删除',
          key: 'action',
          render: (text, record,index) => (
         
            <Space size="middle">
              <a onClick={()=>{this.setState({from1:record,visible:true,bianji:"编辑",editIndex:index})}}> 编辑</a>
              <a onClick={this.delfn.bind(this,index)}>Delete</a>
            </Space>
          ),
        }
    ],
    from1:{
      name1:"",
      date:"",
      address:""
    }
   }
   // 抽屉打开
   showDrawer = () => {
    this.setState({
      visible: true,
      from1:{}
    });
  
  };
// 关闭抽屉
  onClose = () => {
    this.setState({
      visible: false,
    });
  };
  // 抽屉提交时候得事件
  onClosesave = () => {
    if (this.state.bianji == "新增") {
        this.props.addfn(this.state.from1)
    } else {
      alert(1)
        this.props.editFn(Object.assign({},this.state.from1,{editIndex:this.state.editIndex}))
    }

    this.setState({
      visible: false,
      from1:{
      }
    },()=>{
      console.log(this.state.from1);
    });

  };
   // 弹窗点击ok时得方法
   handleOk(){
    this.setState({
      isModalVisible:false
    })
    this.props.delFN(this.state.delIndex)
   }
   // 弹窗点击取消得手
   handleCancel(){
    this.setState({
      isModalVisible:false
    })
   }
   // 删除的方法
   delfn(ind){
      console.log(ind)
      // this.setState({
      //   isModalVisible:true,
      //   delIndex:ind
      // })
      this.setState({
        isshow:true,
        delIndex:ind
      })
   }
   componentDidMount(){
       this.props.getList()
   }
   // 获取name得input框的方法
   checkname(e){
      let from1 = this.state.from1
      from1.name1 = e.target.value
      this.setState({
        from1
      })
   }
   // 获取date得input框的值
   checkdate(e){
    let from1 = this.state.from1
    from1.date = e.target.value
    this.setState({
      from1
    })
 }
 checkaddress(e) {
  let from1 = this.state.from1
  from1.address = e.target.value
  this.setState({
    from1
  })
 }
 onSearch(value){
      console.log(value)
      this.props.searchfn(value)
 }
 // 子传父接收到得布尔值
 zi =(data)=>{
    console.log(data)
    this.setState({
      isshow:data
    })
 }

  render() {
    // console.log(this.props)
    return (
      <div>
             {/* <Dirlog></Dirlog> */}
           <Button onClick={this.showDrawer}>增加</Button>
           <Search placeholder="input search text" onSearch={this.onSearch.bind(this)} style={{ width: 200 }} />
          <Table columns={this.state.columns} dataSource={this.props.arr} />
           {/* 点击删除时候得对话框 */}
           <Modal title="删除弹框" visible={this.state.isModalVisible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)}>
              <p>你确定要删除吗
              </p>
          </Modal>
          {/* 抽屉组件 */}
          <Drawer
          title={this.state.bianji}
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
          extra={
            <Space>
              <Button onClick={this.onClose}>Cancel</Button>
              <Button onClick={this.onClosesave} type="primary">
                Submit
              </Button>
            </Space>
          }
        >
          <Form layout="vertical" hideRequiredMark >
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // name="name1" 用受控组件获取input得值在Form.Item不能加name属性，否则会造成回显和不清空问题
                  label="Name"
                  rules={[{ required: true, message: 'Please enter user name' }]}
                >
                  <Input placeholder="Please enter user name" onChange={this.checkname.bind(this)} value={this.state.from1.name1} />
                </Form.Item>
              </Col>
           
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // name="date"
                  label="date"
                  rules={[{ required: true, message: 'Please enter user date' }]}
                >
                  <Input placeholder="Please enter user date"  onChange={this.checkdate.bind(this)} value={this.state.from1.date}/>
                </Form.Item>
              </Col>
           
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // name="address"
                  label="address"
                  rules={[{ required: true, message: 'Please enter user name' }]}
                >
                  <Input placeholder="Please enter user name" onChange={this.checkaddress.bind(this)} value={this.state.from1.address}/>
                </Form.Item>
              </Col>
           
            </Row>
            
          </Form>
        </Drawer>
        {/* 自己封装得弹框组件 */}
        <Dirlog isShow={this.state.isshow} delndex={this.state.delIndex} zichuanfu={this.zi}></Dirlog>
         
      </div>
    )
  }
}
let mapStateToprops = (state)=>{
     console.log(state)
       return {
           ...state.antdReducer
       }
}
let mapDispatchToprops =(disptach)=>bindActionCreators(action,disptach)
export default connect(mapStateToprops,mapDispatchToprops)(Dh1)